<template>
  <div class="content">
    <div ref="topContent">
      <div class="topBox">
        <div class="topLeft">质检项报表</div>
        <div class="topRight">
          <t-button theme="primary" @click="onClickExport" v-permission="['inspection:statement:export']">
            <span>导出本页</span>
            <span style="margin-left: 8px">
            <svg-icon
                :name="'icon-arrowTD'"
                class-name="arrowTD-svg-icon"
            ></svg-icon>
          </span>
          </t-button>
        </div>
      </div>
      <div class="line"></div>
      <div class="formBox" ref="formBox">
        <t-form
            v-show="!isFold"
            ref="form"
            :data="formData"
            :layout="'inline'"
            scroll-to-first-error="smooth"
            :class="isFold ? '' : 'paddingBottom'"
        >
          <t-form-item label="选择平台" requiredMark name="platform" :label-width="68">
            <t-select v-model="formData.platform" @change="onPlatformChange" placeholder="请选择所属平台">
              <t-option key="0" label="CC-1.0" :value="0" />
              <t-option key="1" label="TNCS" :value="1" />
              <t-option key="2" label="CC-2.0" :value="2" />
            </t-select>
          </t-form-item>

          <t-form-item label="所属企业" name="company" requiredMark :label-width="68" v-if="formData.platform !== 1">
            <t-select v-model="formData.company" :filter="filterMethod" @change="onCompanyChange" placeholder="请选择所属企业">
              <t-option v-for="item in companyOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
            </t-select>
          </t-form-item>

          <t-form-item label="所属机构" name="org" requiredMark :label-width="68" v-if="formData.platform !== 1">
            <t-select v-model="formData.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
              <t-option v-for="item in orgOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
            </t-select>
          </t-form-item>

          <!--          TNCs 机构-->
          <t-form-item label="所属机构" name="org" :label-width="68" requiredMark v-if="formData.platform === 1">
            <t-select v-model="formData.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
              <!--              <t-option key="" label="全部" value=""></t-option>-->
              <t-option v-for="item in orgOptions" :key="item.id" :label="item.projectName" :value="item.id" />
            </t-select>
          </t-form-item>

          <t-form-item label="所属部门" name="branch" requiredMark :label-width="68" v-if="formData.platform !== 1">
            <t-select v-model="formData.branch" :filter="filterMethod" @change="onBranchChange" placeholder="请选择所属部门">
              <t-option v-for="item in branchOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId"  />
            </t-select>
          </t-form-item>

          <t-form-item label="选择座席" class="c_seats" name="agentId" :label-width="58" v-if="formData.platform !== 1">
            <t-select
                class="c_tool"
                v-model="formData.agentId"
                :popupVisible="popupVisible"
                @click.stop="onPopupShow"
                placeholder="请选择座席"
                multiple
                :min-collapsed-num="3">
              <t-option v-for="item in seatsOptions" :key="item.agentid" :value="item.agentid" :label="item.agentname">
                <div>
                  <div>
                    <div>{{ item.agentname }} ({{item.agentid}})</div>
                  </div>
                </div>
              </t-option>
              <template #panelBottomContent v-if="seatsOptions && seatsOptions.length > 0 ">
                <div class="select-panel-footer">
                  <div class="line"></div>
                  <div class="boxFlex">
                    <div class="left">
                      <t-checkbox :checked="checkAll" :indeterminate="indeterminate" :on-change="handleSelectAll">全选</t-checkbox>
                    </div>
                    <div class="right" @click="onPopupShow">
                      确定
                    </div>
                  </div>
                </div>
              </template>
            </t-select>
          </t-form-item>

          <t-form-item class="c_time" style="width: 50%" :class="formData.platform === 1 ? 'normalForm' : ''">
            <t-space size="small" style="gap: 10px;">
              <div class="timeType">
                <span class="timeCheck" @click="timeClick('today')">今天</span>
                <span class="timeCheck" @click="timeClick('yesterday')">昨天</span>
                <span class="timeCheck" @click="timeClick('oneMonth')">一月</span>
                <span>时间</span>
              </div>
              <t-date-picker
                  v-model="formData.startTime"
                  placeholder="选择开始时间"
                  valueType="YYYY-MM-DD"
                  :disable-date="(date) => setDateStart(formData.endTime, date)"
              />
              <t-date-picker
                  v-model="formData.endTime"
                  placeholder="选择结束时间"
                  valueType="YYYY-MM-DD"
                  :disable-date="(date) => setDateEnd(formData.startTime, date)"
              />
            </t-space>
          </t-form-item>

          <t-form-item label="选择模版" :class="formData.platform === 1 ? 'shortFrom' : ''" name="templateId" :label-width="56">
            <t-select v-model="formData.templateId">
              <t-option :key="null" label="全部" :value="null"></t-option>
              <t-option v-for="item in templateOptions" :key="item.id" :label="item.templateName" :value="item.id" />
            </t-select>
          </t-form-item>

          <t-form-item class="formHandleBox" v-if="!isFold">
            <t-space size="small" style="gap: 10px;">
              <t-button class="queryBtn hoverBlue" @click="handleQuery(1)"  v-permission="['inspection:statement:list']">查询</t-button>
              <t-button class="resetBtn hoverLightBlue" @click="handleReset">重置</t-button>
              <span class="arrowCont">
                 <svg-icon
                     @click="handleArrow"
                     :name="'icon-arrowTD'"
                     class-name="arrowTD-svg-icon"
                     :style="isFold === true ? '' : 'transform: rotate(180deg)'"
                 ></svg-icon>
              </span>
            </t-space>
          </t-form-item>
        </t-form>
        <!--      展开-->
        <div class="upArrow" v-show="isFold">
          <svg-icon
              @click="handleArrow"
              :name="'icon-arrowTD'"
              class-name="arrowTD-svg-icon"
              :style="isFold === true ? '' : 'transform: rotate(180deg)'"
          ></svg-icon>
        </div>
      </div>
    </div>

    <div class="tableBox">
      <div style="position: relative">
        <t-enhanced-table
            :loading="isLoading"
            ref="tableRef"
            :height="tableHeight"
            v-model:expandedTreeNodes="expandedTreeNodes"
            row-key="id"
            drag-sort="row-handler"
            :data="tableState.tableData"
            :columns="tableState.columns"
            :tree="tableState.treeConfig"
            :expand-icon="expandIcon"
            :treeExpandAndFoldIcon="treeExpandIcon"
            lazy-load
            @expanded-tree-nodes-change="onExpandedTreeNodesChange"
        >
          <template #out_quality_rate>
            <div class="funnel" style="display: flex; align-items: center">
              <span>出检量（率）</span>
              <svg-icon
                  :name="'icon-sort'"
                  class-name="sort-svg-icon"
                  @click="onOutputClick"
              ></svg-icon>
            </div>
          </template>
          <template #quality_score>
            <div class="funnel" style="display: flex; align-items: center">
              <span style="margin-right: 5px;">评分质检分</span>
              <svg-icon
                  :name="'icon-sort'"
                  class-name="sort-svg-icon"
                  @click="onScoreClick"
              ></svg-icon>
            </div>
          </template>
        </t-enhanced-table>

        <div class="emptyBox" v-if="tableState.tableData.length === 0">
          <svg-icon
              :name="'icon-emptyTable'"
              class-name="emptyTable-svg-icon"
          ></svg-icon>
          <span>暂无数据</span>
        </div>
      </div>

      <div class="footerBox">
        <t-pagination
            v-model="current"
            v-model:pageSize="pageSize"
            :pageSizeOptions="[10, 20, 30, 50]"
            :total="totalNum"
            size="small"
            show-jumper
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {computed, getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import {debounce} from "../../utils/tools";
import cache from '@/utils/cache.js'
import { usePageStore } from '@/pinia/page.js'
import {
  ChevronRightCircleIcon,
  ChevronDownCircleIcon
} from 'tdesign-icons-vue-next';
import {
  cc0AgencyList,
  cc0SeatsList,
  cc2AgencyList,
  cc2SeatsList,
  getTemplate,
  TNCsAgencyList
} from "../../api/commonApi";
import { inspectionStatement, inspectionStatementExport} from "../../api/qualityForms";
const pageInstance = getCurrentInstance()
const store = usePageStore()
import { getTypeData, setDateStart, setDateEnd } from '@/hooks/useCheckDate.js'
// form 表单
const formData = reactive({
  platform: null,
  company: '',
  org: '',
  branch: '',
  startTime: '',
  endTime: '',
  agentId: [],
  templateId: null,
  outputType: 0, // 出检排序
  scoreType: 0, // 平均分排序
});

const companyOptions = ref([]) // 企业options
const orgOptions = ref([]) // 机构options
const branchOptions = ref([]) // 部门options
const seatsOptions = ref([]) // 座席options

// 选择平台事件
const onPlatformChange = (type) => {
  getTableHeight()
  store.setFormCondition(type, '', '', '')
  formData.company = ''
  companyOptions.value = []
  formData.org = ''
  orgOptions.value = []
  formData.branch = ''
  branchOptions.value = []
  formData.agentId = []
  seatsOptions.value = []

  // handleReset()
  getCompanyList(type)
}
const getCompanyList = (type) => {
  if(type === 0) { // 企业请求 1.0 接口
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc0AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  } else if(type === 1) { // 机构请求 TNCs 接口
    TNCsAgencyList().then(res => {
      orgOptions.value = res.data
    })
  } else if (type === 2) { // 企业请求2.0 接口
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc2AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  }
}
// 选择企业事件
const onCompanyChange = (type) => {
  store.setFormCondition(formData.platform, type, '', '')
  formData.org = ''
  orgOptions.value = []
  formData.branch = ''
  branchOptions.value = []
  formData.agentId = []
  seatsOptions.value = []
  // 获取机构options
  if(formData.platform === 0) {
    getOrgList(type)
  } else if (formData.platform === 2) {
    getOrgList2(type)
  }
}
const getOrgList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}
const getOrgList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}
// 机构选择事件
const onOrgChange = (type) => {
  store.setFormCondition(formData.platform, formData.company, type, '')

  formData.branch = ''
  branchOptions.value = []
  formData.agentId = []
  seatsOptions.value = []

  if(formData.platform === 0) {
    getBranchList(type)
  } else if (formData.platform === 2) {
    getBranchList2(type)
  }
}
const getBranchList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
const getBranchList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
// 部门选择事件
const onBranchChange = (type) => {
  store.setFormCondition(formData.platform, formData.company, formData.org, type)
  formData.agentId = []
  seatsOptions.value = []

  if(formData.platform === 0) {
    cc0SeatsList(type).then(res => { // 获取 1.0 座席数据
      seatsOptions.value = res.data
    })
  } else if(formData.platform === 2) {
    cc2SeatsList(formData.branch).then(res => { // 获取 2.0 座席数据
      seatsOptions.value = res.data
    })
  }
}
// 座席下拉事件
const popupVisible = ref(false)
const onPopupShow = () => {
  popupVisible.value = !popupVisible.value
}
// 点击弹窗外关闭下拉框
watch(() => store.clickTimeStamp, () => {
  popupVisible.value = false
})
const checkAll = computed(() => seatsOptions.value.length === formData.agentId.length);
const indeterminate = computed(() => !!(seatsOptions.value.length > formData.agentId.length && formData.agentId.length));
const handleSelectAll = (checked) => {
  // value1.value = checked ? ['选项一', '选项二', '选项三'] : [];
  if(seatsOptions.value.length > 0) {
    let ids = []
    seatsOptions.value.forEach(item => {
      ids.push(item['agentid'])
    })
    formData.agentId = checked ? ids : []
  }
};

// 查询
const isLoading = ref(false)
const handleQuery = (num) => {
  if(formData.platform === 0 || formData.platform === 2) { // 1.0 | 2.0
    if(formData.company === '') return MessagePlugin.error('请选择企业！')
    if(formData.org === '') return MessagePlugin.error('请选择机构！')
    if(formData.branch === '') return MessagePlugin.error('请选择部门！')

    formData.asrProjectId = formData.branch
    formData.projectId = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    let data = {
      pageNo: num === 1 ? 1 : current.value,
      pageSize: pageSize.value,
      ...formData
    }
    data.startTime = data.startTime + ' 00:00:00'
    data.endTime = data.endTime + ' 23:59:59'

    isLoading.value = true
    inspectionStatement(data).then(res => {
      if(res.code === 0) {
        tableState.tableData = res.data.list
        current.value = res.data['currPage']
        pageSize.value = res.data['pageSize']
        totalNum.value = res.data['totalCount']
        isLoading.value = false
      }
    }).catch(error => {
      isLoading.value = false
    })

  } else if(formData.platform === 1) { // TNCs
    if(formData.org === '') return MessagePlugin.error('请选择机构！')
    formData.asrProjectId = formData.org
    formData.projectId = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']

    let data = {
      pageNo: num === 1 ? 1 : current.value,
      pageSize: pageSize.value,
      ...formData
    }
    data.startTime = data.startTime + ' 00:00:00'
    data.endTime = data.endTime + ' 23:59:59'

    isLoading.value = true
    inspectionStatement(data).then(res => {
      if(res.code === 0) {
        tableState.tableData = res.data.list ? res.data.list : []
        current.value = res.data['currPage']
        pageSize.value = res.data['pageSize']
        totalNum.value = res.data['totalCount']
        isLoading.value = false
      }
    }).catch(error => {
      isLoading.value = false
    })

  }
};
// 重置
const handleReset = () => {
  timeClick('today')
  formData.agentId = []
  formData.templateId = null
}
let isFold = ref(false)
const handleArrow = () => {
  isFold.value = !isFold.value
}

// 出检量 排序
const outPutFlag = ref(false)
const onOutputClick = () => {
  formData.scoreType = 0
  outPutFlag.value = !outPutFlag.value
  formData.outputType = outPutFlag.value ? 1 : 2
  handleQuery()
}

// 评分质检分 排序
const scoreFlag = ref(false)
const onScoreClick = () => {
  formData.outputType = 0
  scoreFlag.value = !scoreFlag.value
  formData.scoreType = scoreFlag.value ? 1 : 2
  handleQuery()
}

//enhanced-table
const expandIcon = ref(false)

const expandedTreeNodes = ref([]);
const tableState = reactive({
  tableData: [],
  columns: [
    { colKey: '', width: 68},
    { colKey: 'name', title: '质检项名称', ellipsis: true },
    { colKey: 'record', title: '录音量', ellipsis: true },
    { colKey: 'outputNumber', title: 'out_quality_rate', ellipsis: true , cell:(h, {row}) => {
        return row.outputNumber + ' (' + row.outputRatio.toFixed(2) + '%)'
      }
    },
    { colKey: 'correctionNumber', title: '纠正量（率）', ellipsis: true, cell:(h, {row}) => {
        return row.correctionNumber + ' (' + row.correctionRatio.toFixed(2) + '%)'
      }
    },
    { colKey: 'score', title: 'quality_score', ellipsis: true, cell:(h, {row}) => {
        return row.score + '分'
      } }


  ],
  treeConfig: {
    childrenKey: 'qualityRules',
    treeNodeColumnIndex: 0,
    indent: 50,
    expandTreeNodeOnClick: false,
  }
})

const onExpandedTreeNodesChange = (expandedTreeNodes, context) => {
  console.log(expandedTreeNodes, context);
};
const treeExpandAndFoldIconRender = (h, { type, row }) => {
//   nextTick(() => {
    return type === 'expand' ?  <ChevronRightCircleIcon /> : <ChevronDownCircleIcon />
//   })
//
};
const treeExpandIcon = computed(() => {
  // 自定义展开图标
    return treeExpandAndFoldIconRender;
})



// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    const otherHeight = pageInstance.refs.formBox.offsetHeight
    const windowHeight = window.innerHeight
    tableHeight.value = windowHeight - otherHeight - 229
    console.log('tableHeight.value', tableHeight.value)
  })
}
watch(() => isFold.value, (newVal, oldVal) => {
  getTableHeight()
})

// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)

// 获取模版list
const templateOptions = ref([])
const getTemplateOptions = () => {
  let id = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  getTemplate(id).then(res => {
    if(res.code === 0) {
      templateOptions.value = res.data
    }
  })
}

onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
  getTemplateOptions()
  // 设置默认选中
  defaultSelection()
  // 时间默认当天
  timeClick('today')
})

// 有值默认选中
const defaultSelection = () => {
    let formState = store.quality_form_id
    if(formState.platform !== null) { // 获取企业
      getCompanyList(formState.platform)
      formData.platform = formState.platform
    } else {
      onPlatformChange(0)
    }
    if(formState.company) { // 获取机构
      if(formData.platform === 0) {
        getOrgList(formState.company)
      } else if (formData.platform === 2) {
        getOrgList2(formState.company)
      }
      formData.company = formState.company
    }
    if(formState.org) { // 获取部门
      if(formData.platform === 0) {
        getBranchList(formState.org)
      } else if (formData.platform === 2) {
        getBranchList2(formState.org)
      }
      formData.org = formState.org
    }
    if(formState.branch) {
      formData.branch = formState.branch
      if(formData.platform === 0) {
        cc0SeatsList(formData.branch).then(res => { // 获取 1.0 座席数据
          seatsOptions.value = res.data
        })
      } else if (formData.platform === 2) {
        cc2SeatsList(formData.branch).then(res => { // 获取 2.0 座席数据
          seatsOptions.value = res.data
        })
      }
      timeClick('today')
      handleQuery()
    }
}

onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})

// 时间选择事件
const timeClick = (type) => {
  formData.startTime = getTypeData(type, false).startTime
  formData.endTime = getTypeData(type, false).endTime
}

// 分页
const current = ref(1);
const pageSize = ref(10);
const totalNum = ref(0)
const onPageSizeChange = (size) => {
  pageSize.value = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  current.value = index
  handleQuery()
};

// 导出
const onClickExport = () => {
  let data = {
    pageNo: current.value,
    pageSize: pageSize.value,
    ...formData
  }
  data.startTime = data.startTime + ' 00:00:00'
  data.endTime = data.endTime + ' 23:59:59'

  inspectionStatementExport(data).then(res => {
    const url = URL.createObjectURL(res) //把blob对象转成一个url
    //创建一个a标签
    const a = document.createElement("a");
    a.href = url; //给a标签上的href属性加上地址
    a.download = "质检项报表导出.xlsx"; //下载名称
    document.body.appendChild(a); //将a标签添加到文档对象中
    a.click(); //调点击事件
    document.body.removeChild(a); // 一次性的，用完就删除a标签
  }).catch(error => {
    console.log('质检项报表导出', error)
  })
}

const filterMethod = (search, option) => {
  return option.label.indexOf(search) !== -1 || option.value.indexOf(search) !== -1
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  overflow: hidden;
  padding: 8px;
  background-color: #EBECED!important;
}
.topBox {
  height: 65px;
  display: flex;
  padding: 20px 20px 17px 20px;
  background-color: rgba(255,255,255,1);
  border-radius: 4px 4px 0 0;
  .topLeft {
    font-size: 16px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
  }
  .topRight {
    margin-left: auto;
    :deep(.t-button) {
      width: 88px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(227, 238, 255, 1);
      border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(30, 117, 254, 1);
    }
    :deep(.t-button):hover {
      background: var(--Brand-Brand1-Light, #EDF2FD) !important;
      color: var(--Brand-Brand6-Hover, #458DFF) !important;
      border: 1px solid var(--Brand-Brand6-Hover, #458DFF) !important;
    }
    .arrowTD-svg-icon {
      height: 16px;
      width: 16px;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
.line {
  height: 0;
  opacity: 1;
  background: rgba(204, 204, 204, 1);
  border: 1px solid rgba(239, 242, 245, 1);
  margin: 0 20px;
}
.formBox {
  padding: 0 20px;
  background-color: rgba(255,255,255,1);
  overflow: hidden;
  :deep(.t-form) {
    padding: 20px 0 20px 0;
    .t-form-inline {
      row-gap: 16px !important;
    }
    .t-form__item {
      width: 25%;
      height: 28px;
      margin-right: 0!important;
      padding-right: 10px;
      .t-range-input {
        height: 28px;
      }
      .t-form__label--right {
        text-align: left;
        padding-right: 0;
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
      }
      .t-select__wrap {
        .t-input {
          height: 28px;
        }
      }
    }
    .t-form__item:nth-child(4) {
      padding-right: 0;
    }
    .c_time {
      .t-form__label--right {display: none}
      .t-form__controls {
        margin-left: 0 !important;
      }
      .t-space {
        width: 100%;
        .timeCheck {
          cursor: pointer;
          font-size: 12px;
          font-weight: 400;
          color: rgba(30, 117, 254, 1);
        }
      }
      .t-space-item:nth-child(1) {
        width: 126px;
      }
      .t-space-item:nth-child(2) {
        width: calc((100% - 146px) / 2);
      }
      .t-space-item:nth-child(3) {
        width: calc((100% - 146px) / 2);
      }
      .t-date-picker {
        height: 28px;
        width: 100%;
        .t-input {
          height: 28px;
        }
      }
      .timeType {
        float: left;
        width: 126px;
        text-align: left;
        height: 28px;
        line-height: 28px;
        span {
          margin-right: 10px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
        }
        span:nth-child(4) {
          margin-right: 0;
        }
      }
    }
    .t-form__item:nth-child(7) {
      padding-right: 0;
    }
    .formHandleBox {
      margin-left: auto;
      text-align: right;
      padding-right: 0;
      .t-space {
        margin-left: auto;
        justify-content: center;
        align-items: center;
        .queryBtn {
          border: none;
          width: 56px;
          height: 30px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(30, 117, 254, 1);
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
        .resetBtn {
          width: 56px;
          height: 30px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(236, 242, 254, 1);
          border: 0.5px solid rgba(30, 117, 254, 1);
          font-size: 12px;
          font-weight: 400;
          color: rgba(30, 117, 254, 1);
          text-align: center;
        }
        .arrowCont {
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 12px;
            font-weight: 500;
            color: rgba(138, 138, 138, 1);
          }
          .arrowTD-svg-icon {
            height: 16px;
            width: 16px;
            cursor: pointer;
          }
        }
      }
      .t-form__controls {
        margin-left: 0 !important;
      }
    }
  }
  .upArrow {
    text-align: right;
    height: 20px;
    .arrowTD-svg-icon {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }
}
.tableBox {
  background-color: rgba(255, 255,255, 1);
  :deep(.t-table__content) {
    //background-color: red;
  }
  border-radius: 4px;
  :deep(.t-table__header) {
    tr {
      th {
        padding: 7px 10px;
        box-sizing: border-box;
      }
      th:nth-child(1) {
        padding: 0 30px;
      }
    }

  }
  :deep(.t-table__body) {
    tr {
      td {
        padding: 6px 10px;
        box-sizing: border-box;
      }
      td:nth-child(1) {
        padding: 0 30px;
      }
    }
  }
  :deep(.t-table-tr--level-1) {
    background: rgba(250, 250, 250, 1);
    .t-table-td--ellipsis:nth-child(2) {
      padding-left: 2em;
    }
  }
  .exclMark-svg-icon {
    width: 12px;
    height: 12px;
    cursor: pointer;
  }
  .sort-svg-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  :deep(.custom-cell-select) {
    padding-right: 0!important;
  }
  :deep(.custom-cell-index) {
    padding-left: 0!important;
  }
}
:deep(.t-table__empty) {
  display: none;
}
.emptyBox {
  position: absolute;
  height: 116px;
  width: 69px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .emptyTable-svg-icon {
    height: 62px;
    width: 69px;
  }
  span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(92, 91, 91, 1);
  }
}

.footerBox {
  background-color: rgba(255,255,255,1);
  width: calc(100% - 16px);
  position: absolute;
  bottom: 8px;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
}

//下拉多选样式 ⬇
.c_tool {
  padding-right: 0 !important;
  position: relative;
  :deep(.t-select-input) {
    height: 28px;
    .t-tag-input .t-input {
      min-height: 28px;
      .t-tag {
        height: 20px;
      }
    }
  }
  .c_all {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: rgb(12, 13, 14);
    padding-left: 8px;
    width: 90%;
    z-index: 100;
    //background-color: red;
  }
  :deep(.t-select__list) {
    padding-bottom: 30px !important;
  }
}
.select-panel-footer {
  position: fixed;
  bottom: -21px;
  //background-color: red;

  z-index: 100 !important;
  opacity: 1;
  width: 100%;
  //width: calc(100% - 6px);
  .line {
    height: 0;
    opacity: 1;
    border: 0.8px solid rgba(229, 229, 229, 1);
  }
  .boxFlex {
    padding: 0 15px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 3px 3px;
    background-color: white;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    .left {
      flex: 1;
      :deep(.t-checkbox__label) {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
    .right {
      cursor: pointer;
      margin-left: auto;
      font-size: 12px;
      font-weight: 400;
      color: rgba(30, 117, 254, 1);
    }
  }
}
// 下拉框样式 ⬆
.shortFrom {
  padding-right: 10px !important;
}
.normalForm {
  padding-right: 0 !important;
}
</style>
